{extend name="layout/main" /}

{block name="style"}
<style>
    .detail-container {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }
    
    .detail-section {
        margin-bottom: 30px;
    }
    
    .detail-section h4 {
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #3498db;
        color: #2c3e50;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .section-icon {
        font-size: 18px;
    }
    
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 6px;
    }
    
    .detail-label {
        font-weight: 600;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
    }
    
    .detail-value {
        color: #333;
        font-size: 15px;
        word-break: break-all;
        min-height: 20px;
    }
    
    .status-info {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        border-left: 4px solid #3498db;
    }
    
    .status-badge {
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
    }
    
    .status-1 { background: #e3f2fd; color: #1976d2; }
    .status-2 { background: #fff3e0; color: #f57c00; }
    .status-3 { background: #f3e5f5; color: #7b1fa2; }
    .status-4 { background: #ffebee; color: #d32f2f; }
    .status-5 { background: #e8f5e8; color: #388e3c; }
    .status-0 { background: #e8f5e8; color: #2e7d32; }
    
    .type-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .type-2 { background: #e3f2fd; color: #1976d2; }
    .type-4 { background: #fff3e0; color: #f57c00; }
    
    .action-panel {
        position: sticky;
        top: 80px;
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    
    .image-preview {
        max-width: 200px;
        max-height: 200px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        cursor: pointer;
        transition: transform 0.2s;
    }
    
    .image-preview:hover {
        transform: scale(1.05);
    }
    
    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 10px;
    }
    
    .image-item {
        text-align: center;
    }
    
    .image-label {
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
        font-weight: 500;
    }
    
    .no-image {
        width: 200px;
        height: 150px;
        background: #f5f5f5;
        border: 2px dashed #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 14px;
        border-radius: 8px;
    }
    
    @media (max-width: 768px) {
        .detail-container {
            grid-template-columns: 1fr;
        }
        
        .detail-grid {
            grid-template-columns: 1fr;
        }
        
        .action-panel {
            position: static;
        }
        
        .image-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{/block}

{block name="content"}
<div class="detail-container">
    <!-- 左侧详情信息 -->
    <div>
        <!-- 基本信息 -->
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">🏪</span>
                    基本信息
                </h3>
            </div>
            <div class="content-card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">商户ID</div>
                        <div class="detail-value">{$merchant.id}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">商户名称</div>
                        <div class="detail-value">{$merchant.merchant_name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">店铺名称</div>
                        <div class="detail-value">{$merchant.store_name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">品牌名称</div>
                        <div class="detail-value">{$merchant.name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">商户类型</div>
                        <div class="detail-value">
                            <span class="type-badge type-{$merchant.type}">
                                {if $merchant.type == 2}企业{elseif $merchant.type == 4}个体工商户{else}未知{/if}
                            </span>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">申请时间</div>
                        <div class="detail-value">{$merchant.create_time|date='Y-m-d H:i:s'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">更新时间</div>
                        <div class="detail-value">{$merchant.update_time|date='Y-m-d H:i:s'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">行业信息</div>
                        <div class="detail-value">{$merchant.industry_name|default='--'}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 联系信息 -->
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">👤</span>
                    联系信息
                </h3>
            </div>
            <div class="content-card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">法人/经营者</div>
                        <div class="detail-value">{$merchant.legal_person|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">联系电话</div>
                        <div class="detail-value">{$merchant.mobile|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">邮箱地址</div>
                        <div class="detail-value">{$merchant.email|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">注册地址</div>
                        <div class="detail-value">{$merchant.company_address|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">经营地址</div>
                        <div class="detail-value">{$merchant.biz_store_address|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">营业期限</div>
                        <div class="detail-value">{$merchant.business_time|default='--'}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 证件信息 -->
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">📄</span>
                    证件信息
                </h3>
            </div>
            <div class="content-card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">营业执照号</div>
                        <div class="detail-value">{$merchant.business_license_number|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">身份证姓名</div>
                        <div class="detail-value">{$merchant.id_card_name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">身份证号码</div>
                        <div class="detail-value">{$merchant.id_card_number|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">身份证地址</div>
                        <div class="detail-value">{$merchant.id_card_address|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">身份证有效期</div>
                        <div class="detail-value">
                            {if !empty($merchant.id_card_valid_time_begin) && !empty($merchant.id_card_valid_time)}
                                {$merchant.id_card_valid_time_begin} 至 {$merchant.id_card_valid_time}
                            {else}
                                --
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 银行账户信息 -->
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">🏦</span>
                    银行账户信息
                </h3>
            </div>
            <div class="content-card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">开户人姓名</div>
                        <div class="detail-value">{$merchant.account_name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">银行账户</div>
                        <div class="detail-value">{$merchant.account_number|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">开户银行</div>
                        <div class="detail-value">{$merchant.bank_name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">银行地址</div>
                        <div class="detail-value">{$merchant.bank_address|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">联行号</div>
                        <div class="detail-value">{$merchant.bank_branch_id|default='--'}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 支付宝信息 -->
        {if !empty($merchant.ali_name) || !empty($merchant.ali_accont)}
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">💰</span>
                    支付宝信息
                </h3>
            </div>
            <div class="content-card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">支付宝姓名</div>
                        <div class="detail-value">{$merchant.ali_name|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">支付宝账号</div>
                        <div class="detail-value">{$merchant.ali_accont|default='--'}</div>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        <!-- 微信支付信息 -->
        {if !empty($merchant.sub_mchid) || !empty($merchant.applyment_id)}
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">💳</span>
                    微信支付信息
                </h3>
            </div>
            <div class="content-card-body">
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">微信商户号</div>
                        <div class="detail-value">{$merchant.sub_mchid|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">申请单号</div>
                        <div class="detail-value">{$merchant.applyment_id|default='--'}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">业务申请编号</div>
                        <div class="detail-value">{$merchant.out_request_no|default='--'}</div>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        <!-- 证件图片 -->
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">🖼️</span>
                    证件图片
                </h3>
            </div>
            <div class="content-card-body">
                <div class="image-grid">
                    <!-- 营业执照 -->
                    <div class="image-item">
                        <div class="image-label">营业执照</div>
                        {if !empty($merchant.business_license_image)}
                            <img src="{$merchant.business_license_image}" alt="营业执照" class="image-preview" onclick="previewImage(this.src)">
                        {else}
                            <div class="no-image">暂无图片</div>
                        {/if}
                    </div>
                    
                    <!-- 身份证正面 -->
                    <div class="image-item">
                        <div class="image-label">身份证正面</div>
                        {if !empty($merchant.id_card_image)}
                            <img src="{$merchant.id_card_image}" alt="身份证正面" class="image-preview" onclick="previewImage(this.src)">
                        {else}
                            <div class="no-image">暂无图片</div>
                        {/if}
                    </div>
                    
                    <!-- 身份证反面 -->
                    <div class="image-item">
                        <div class="image-label">身份证反面</div>
                        {if !empty($merchant.id_card_national_image)}
                            <img src="{$merchant.id_card_national_image}" alt="身份证反面" class="image-preview" onclick="previewImage(this.src)">
                        {else}
                            <div class="no-image">暂无图片</div>
                        {/if}
                    </div>
                    
                    <!-- 超级管理员证件正面 -->
                    {if !empty($merchant.contact_id_doc_image_path)}
                    <div class="image-item">
                        <div class="image-label">超管证件正面</div>
                        <img src="{$merchant.contact_id_doc_image_path}" alt="超管证件正面" class="image-preview" onclick="previewImage(this.src)">
                    </div>
                    {/if}
                    
                    <!-- 超级管理员证件反面 -->
                    {if !empty($merchant.contact_id_doc_back_path)}
                    <div class="image-item">
                        <div class="image-label">超管证件反面</div>
                        <img src="{$merchant.contact_id_doc_back_path}" alt="超管证件反面" class="image-preview" onclick="previewImage(this.src)">
                    </div>
                    {/if}
                    
                    <!-- 业务办理授权函 -->
                    {if !empty($merchant.business_authorization_letter_path)}
                    <div class="image-item">
                        <div class="image-label">业务授权函</div>
                        <img src="{$merchant.business_authorization_letter_path}" alt="业务授权函" class="image-preview" onclick="previewImage(this.src)">
                    </div>
                    {/if}
                </div>
            </div>
        </div>
        
        <!-- 场所图片 -->
        {if !empty($merchant.store_entrance_pic) || !empty($merchant.indoor_pic)}
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">
                    <span class="section-icon">🏬</span>
                    场所图片
                </h3>
            </div>
            <div class="content-card-body">
                <div class="image-grid">
                    <!-- 门头照片 -->
                    {if !empty($merchant.store_entrance_pic)}
                    <div class="image-item">
                        <div class="image-label">门头照片</div>
                        <img src="{$merchant.store_entrance_pic}" alt="门头照片" class="image-preview" onclick="previewImage(this.src)">
                    </div>
                    {/if}
                    
                    <!-- 内部照片 -->
                    {if !empty($merchant.indoor_pic)}
                    <div class="image-item">
                        <div class="image-label">内部照片</div>
                        <img src="{$merchant.indoor_pic}" alt="内部照片" class="image-preview" onclick="previewImage(this.src)">
                    </div>
                    {/if}
                </div>
            </div>
        </div>
        {/if}
    </div>
    
    <!-- 右侧操作面板 -->
    <div class="action-panel">
        <!-- 状态信息 -->
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">审核状态</h3>
            </div>
            <div class="content-card-body">
                <div class="status-info">
                    <div style="margin-bottom: 15px;">
                        <strong>当前状态：</strong>
                        <span class="status-badge status-{$merchant.status}">
                            {switch name="merchant.status"}
                                {case value="1"}填写中{/case}
                                {case value="2"}已提交{/case}
                                {case value="3"}代签约{/case}
                                {case value="4"}已驳回{/case}
                                {case value="5"}待打款{/case}
                                {case value="0"}成功{/case}
                                {default /}未知状态
                            {/switch}
                        </span>
                    </div>
                    
                    {if !empty($merchant.update_time)}
                    <div style="margin-bottom: 10px;">
                        <strong>更新时间：</strong><br>
                        {$merchant.update_time|date='Y-m-d H:i:s'}
                    </div>
                    {/if}
                    
                    {if !empty($merchant.remark)}
                    <div style="margin-bottom: 10px;">
                        <strong>备注信息：</strong><br>
                        <div style="background: white; padding: 10px; border-radius: 4px; margin-top: 5px;">
                            {$merchant.remark}
                        </div>
                    </div>
                    {/if}
                    
                    {if $merchant.status == 4 }
                    <div>
                        <strong>驳回原因：</strong><br>
                        <div style="background: #ffebee; padding: 10px; border-radius: 4px; margin-top: 5px; color: #d32f2f;">
                            {$merchant.reason}
                        </div>
                    </div>
                    {/if}
                </div>
                
                <!-- 操作按钮 -->
<!--                <div class="action-buttons">-->
<!--                    {if $merchant.status == 2}-->
<!--                        <button class="btn btn-success" onclick="approveMerchant({$merchant.id})">审核通过</button>-->
<!--                        <button class="btn btn-warning" onclick="rejectMerchant({$merchant.id})">审核驳回</button>-->
<!--                    {/if}-->
<!--                    <button class="btn btn-danger" onclick="deleteMerchant({$merchant.id})">删除商户</button>-->
<!--                    <a href="/admin/merchant" class="btn" style="background: #95a5a6;">返回列表</a>-->
<!--                </div>-->
            </div>
        </div>
        
        <!-- 联系人信息 -->
        {if $merchant.contact_type == 66}
        <div class="content-card mb-20">
            <div class="content-card-header">
                <h3 class="content-card-title">超级管理员</h3>
            </div>
            <div class="content-card-body">
                <div style="margin-bottom: 10px;">
                    <strong>姓名：</strong>{$merchant.contact_name|default='--'}
                </div>
                <div style="margin-bottom: 10px;">
                    <strong>身份证号：</strong>{$merchant.contact_id_card_number|default='--'}
                </div>
                <div style="margin-bottom: 10px;">
                    <strong>证件类型：</strong>
                    {if $merchant.contact_id_doc_type == 'IDENTIFICATION_TYPE_MAINLAND_IDCARD'}
                        身份证
                    {else}
                        {$merchant.contact_id_doc_type}
                    {/if}
                </div>
                {if !empty($merchant.contact_id_doc_period_begin) && !empty($merchant.contact_id_doc_period_end)}
                <div>
                    <strong>有效期：</strong><br>
                    {$merchant.contact_id_doc_period_begin} 至 {$merchant.contact_id_doc_period_end}
                </div>
                {/if}
            </div>
        </div>
        {/if}
        
        <!-- 技术信息 -->
        <div class="content-card">
            <div class="content-card-header">
                <h3 class="content-card-title">技术信息</h3>
            </div>
            <div class="content-card-body">
                <div style="font-size: 12px; color: #666; line-height: 1.6;">
                    <div><strong>MCH ID:</strong> {$merchant.mch_id|default='--'}</div>
                    <div><strong>SUB MCH ID:</strong> {$merchant.sub_mch_id|default='--'}</div>
                    <div><strong>ORG ID:</strong> {$merchant.org_id|default='--'}</div>
                    <div><strong>OpenID:</strong> {$merchant.openid|default='--'}</div>
                    {if !empty($merchant.wechat_app_id)}
                    <div><strong>微信AppID:</strong> {$merchant.wechat_app_id}</div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图片预览模态框 -->
<div id="imageModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 9999; cursor: pointer;" onclick="closeImageModal()">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%;">
        <img id="previewImg" style="max-width: 100%; max-height: 100%; border-radius: 8px;">
    </div>
</div>

<!-- 审核模态框 -->
<div id="approveModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; min-width: 400px;">
        <h3 style="margin-bottom: 20px;">审核通过</h3>
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px;">备注信息（可选）：</label>
            <textarea id="approveRemark" style="width: 100%; height: 80px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" placeholder="请输入审核备注..."></textarea>
        </div>
        <div style="text-align: right;">
            <button class="btn" style="background: #95a5a6; margin-right: 10px;" onclick="closeModal('approveModal')">取消</button>
            <button class="btn btn-success" onclick="confirmApprove()">确认通过</button>
        </div>
    </div>
</div>

<div id="rejectModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; min-width: 400px;">
        <h3 style="margin-bottom: 20px;">审核驳回</h3>
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px;">驳回原因（必填）：</label>
            <textarea id="rejectReason" style="width: 100%; height: 80px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" placeholder="请输入驳回原因..."></textarea>
        </div>
        <div style="text-align: right;">
            <button class="btn" style="background: #95a5a6; margin-right: 10px;" onclick="closeModal('rejectModal')">取消</button>
            <button class="btn btn-danger" onclick="confirmReject()">确认驳回</button>
        </div>
    </div>
</div>
{/block}

{block name="script"}
    // 图片预览
    function previewImage(src) {
        document.getElementById('previewImg').src = src;
        document.getElementById('imageModal').style.display = 'block';
    }
    
    function closeImageModal() {
        document.getElementById('imageModal').style.display = 'none';
    }
    
    // 审核通过
    function approveMerchant(id) {
        document.getElementById('approveModal').style.display = 'block';
        document.getElementById('approveRemark').value = '';
    }
    
    // 审核驳回
    function rejectMerchant(id) {
        document.getElementById('rejectModal').style.display = 'block';
        document.getElementById('rejectReason').value = '';
    }
    
    // 删除商户
    function deleteMerchant(id) {
        if (confirm('确定要删除这个商户吗？此操作不可恢复！')) {
            fetch('/admin/merchant/delete/' + id, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    alert('删除成功');
                    window.location.href = '/admin/merchant';
                } else {
                    alert('删除失败：' + data.msg);
                }
            })
            .catch(error => {
                alert('操作失败，请重试');
            });
        }
    }
    
    // 确认审核通过
    function confirmApprove() {
        const remark = document.getElementById('approveRemark').value;
        
        fetch('/admin/merchant/approve/{$merchant.id}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'remark=' + encodeURIComponent(remark)
        })
        .then(response => response.json())
        .then(data => {
            if (data.code === 1) {
                alert('审核通过成功');
                location.reload();
            } else {
                alert('操作失败：' + data.msg);
            }
        })
        .catch(error => {
            alert('操作失败，请重试');
        });
    }
    
    // 确认审核驳回
    function confirmReject() {
        const reason = document.getElementById('rejectReason').value.trim();
        
        if (!reason) {
            alert('请填写驳回原因');
            return;
        }
        
        fetch('/admin/merchant/reject/{$merchant.id}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'reason=' + encodeURIComponent(reason)
        })
        .then(response => response.json())
        .then(data => {
            if (data.code === 1) {
                alert('审核驳回成功');
                location.reload();
            } else {
                alert('操作失败：' + data.msg);
            }
        })
        .catch(error => {
            alert('操作失败，请重试');
        });
    }
    
    // 关闭模态框
    function closeModal(modalId) {
        document.getElementById(modalId).style.display = 'none';
    }
    
    // 点击模态框外部关闭
    document.addEventListener('click', function(e) {
        if (e.target.id === 'approveModal' || e.target.id === 'rejectModal') {
            closeModal(e.target.id);
        }
    });
{/block}
